<template>
	<view class="main">
		<gui-a-header bg="transparent"></gui-a-header>
		<view class="warp">
			<view class="header">
				<image class="logo_img" src="../../static/logo.png" mode="widthFix"></image>
				<view class="title f42 c333">
					找回密码
				</view>
			</view>
			<view class="form">
				<view class="row gui-flex bot_line">
					<view class="label c333">
						+86
					</view>
					<view class="input">
						<input type="text" placeholder="手机号码" />
					</view>
				</view>
				<view class="row gui-flex bot_line">
					<view class="label c333">
						验证码
					</view>
					<view class="input gui-flex">
						<input type="text" placeholder="输入验证码" />
						<view class="btn-code f26">
							获取验证码
						</view>
					</view>
				</view>
				<view class="row gui-flex bot_line">
					<view class="label c333">
						新密码
					</view>
					<view class="input">
						<input type="text" placeholder="6~16位字母数字组合" />
					</view>
				</view>
				<view class="row gui-flex bot_line">
					<view class="label c333">
						确认密码
					</view>
					<view class="input">
						<input type="text" placeholder="再次输入您的密码" />
					</view>
				</view>
			</view>
			<view class="btn_warp">
				<button class="saveBtn f30" @tap="sumbit">提交</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		authLogin
	} from '@/api/app.js';
	
	const sumbit = ()=> {
		authLogin().then(res => {
			console.log(res);
		})
	}
	
</script>

<style lang="scss">
	.header {
		box-sizing: border-box;
		padding: 48rpx;

		.logo_img {
			width: 130rpx;
		}

		.title {
			padding-top: 35rpx;
		}
	}

	.btn-code {
		width: 151rpx;
		color: #167C3A;
	}

	.form {
		box-sizing: border-box;
		padding: 48rpx;

		.row {
			padding: 30rpx 0;

			.label {
				width: 200rpx;
			}

			.input {
				flex: 1;
			}
		}

		.bot_line {
			border-bottom: 1rpx solid #E6E6E6;
		}
	}

	.btn_warp {
		box-sizing: border-box;
		padding: 48rpx;

		.saveBtn {
			font-size: 30rpx;
		}
	}
</style>